<script setup>
import http_posts from '@/api/posts.js'
import http_company from '@/api/company.js'
import http_login from '@/api/login.js'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
import router from '@/router/index.js'
import { useNavbarStore } from '../../stores/navbar'
import { useUserStore } from '@/stores/user.js'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const route = useRoute()
const navbarStore = useNavbarStore()

const postsInfo = ref({}) //职位信息
const companyInfo = ref({}) //公司信息
const userInfo = ref({}) //发布者信息
// 获得职位信息
const getPostsInfo = async (postsId) => {
  const result = await http_posts.getPostsInfo(postsId)
  if (result.code === 200) {
    postsInfo.value = result.data
    postsInfo.value.postsKey = JSON.parse(postsInfo.value.postsKey)
    getCompanyInfo(postsInfo.value.companyId)
    getUserInfo(postsInfo.value.publisherId)
  }
}
// 获得公司信息
const longitude = ref(0) //经度
const latitude = ref(0) //纬度
const getCompanyInfo = async (companyId) => {
  const result = await http_company.getCompanyById(companyId)
  if (result.code === 200) {
    companyInfo.value = result.data
    let arr = companyInfo.value.position.split(',')
    longitude.value = +arr[0]
    latitude.value = +arr[1]
  }
}
const getUserInfo = async (userId) => {
  const result = await http_login.getUserInfobyId(userId)
  if (result.code === 200) {
    userInfo.value = result.data
  }
}
const like = ref(false) //是否感兴趣
const likeContent = ref('感兴趣')
// 是否感兴趣切换
const buttonCheck = () => {
  like.value = !like.value
  if (like.value) {
    // 发送请求
    likeContent.value = '取消感兴趣'
    ElMessage({
      message: '添加到感兴趣列表中',
      type: 'success'
    })
    http_login.recordAddPosts(
      userStore.userInfo.userId,
      postsInfo.value.postsId
    )
  } else {
    likeContent.value = '感兴趣'
    ElMessage({
      message: '在感兴趣列表中移除',
      type: 'success'
    })
    http_login.recordDeletePosts(
      userStore.userInfo.userId,
      postsInfo.value.postsId
    )
  }
}
// 判断用户是否感兴趣
const recordCheckPosts = async () => {
  const result = await http_login.recordCheckPosts(
    userStore.userInfo.userId,
    route.query.postsId
  )
  if (result.data) {
    like.value = !like.value
    likeContent.value = '取消感兴趣'
  }
}
// 与职位发布者沟通
const connect = () => {
  http_login.recordAddConnect(
    userStore.userInfo.userId,
    postsInfo.value.postsId
  )
  router.push({
    path: '/connect',
    query: {
      connectId: postsInfo.value.publisherId,
      postsId: postsInfo.value.postsId
    }
  })
}

// 高德地图操作

const path = ref([])
const current_position = ref([])
function initMap() {
  window._AMapSecurityConfig = {
    securityJsCode: '50ee6098a3610602379bd8bc2bbbb299'
  }
  AMapLoader.load({
    key: '0ba96f5aa008a13c6a28e1bff6e5ab4c', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      const map = new AMap.Map('container', {
        //设置地图容器id
        zoom: 15, //初始化地图级别
        center: [longitude.value, latitude.value] //初始化地图中心点位置
      })
      // 添加插件
      AMap.plugin(
        [
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.HawkEye',
          'AMap.Geolocation',
          'AMap.MapType',
          'AMap.MouseTool'
        ],
        function () {
          //异步同时加载多个插件
          // 添加地图插件
          map.addControl(new AMap.ToolBar()) // 工具条控件;范围选择控件
          map.addControl(new AMap.Scale()) // 显示当前地图中心的比例尺
          map.addControl(new AMap.HawkEye()) // 显示缩略图
          map.addControl(new AMap.Geolocation()) // 定位当前位置
          map.addControl(new AMap.MapType()) // 实现默认图层与卫星图,实时交通图层之间切换

          // 以下是鼠标工具插件
          const mouseTool = new AMap.MouseTool(map)
          // mouseTool.rule();// 用户手动绘制折线图,测量距离
          mouseTool.measureArea() // 测量面积
        }
      )
      addMarker()
      // 单击
      map.on('click', (e) => {
        // lng ==> 经度值  lat => 维度值
        current_position.value = [e.lnglat.lng, e.lnglat.lat]
        path.value.push([e.lnglat.lng, e.lnglat.lat])
        addMarker()
        // addPolyLine();
      })
      function addMarker() {
        const marker = new AMap.Marker({
          icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          position: [longitude.value, latitude.value],
          // 通过设置 offset 来添加偏移量
          offset: new AMap.Pixel(-20, -50)
        })
        marker.setMap(map)
      }
    })
    .catch((e) => {
      console.log(e)
    })
}

// 高德地图操作

onMounted(() => {
  window.scrollTo(0, 0)
  getPostsInfo(route.query.postsId)
  setTimeout(() => {
    initMap()
  }, 200)
  navbarStore.setFlag(false)
  recordCheckPosts()
})
</script>

<template>
  <div class="posts-box">
    <div class="top">
      <div style="width: 80%; margin: 0 auto">
        <div style="line-height: 50px">招聘中</div>
        <div>
          <span style="font-size: 26px; font-weight: 900">{{
            postsInfo.name
          }}</span>
          <span
            style="
              color: #f26d49;
              font-size: 26px;
              font-weight: 900;
              margin-left: 50px;
            "
            >{{ postsInfo.salary }}薪</span
          >
        </div>
        <div style="margin-top: 20px">
          <span style="margin-right: 20px">
            <span class="iconfont icon-map"></span>
            {{ postsInfo.city }}
          </span>
          <span style="margin-right: 20px">
            <span class="iconfont icon-qidongzhaopinshenqing"></span>
            <span v-if="postsInfo.postsType === 0">社招</span>
            <span v-else-if="postsInfo.postsType === 1">应届校园招聘</span>
            <span v-else-if="postsInfo.postsType === 2">实习生招聘</span>
          </span>
          <span>
            <span class="iconfont icon-edu-s"></span>
            <span v-if="postsInfo.academicQualifications === 0"
              >无学历要求</span
            >
            <span v-if="postsInfo.academicQualifications === 1">高中</span>
            <span v-if="postsInfo.academicQualifications === 2">大专</span>
            <span v-if="postsInfo.academicQualifications === 3">本科</span>
            <span v-if="postsInfo.academicQualifications === 4">研究生</span>
            <span v-if="postsInfo.academicQualifications === 5">博士</span>
          </span>
        </div>
        <div style="display: flex; margin-top: 20px">
          <div
            :class="['button', 'none', like ? 'like' : '']"
            @click="buttonCheck"
          >
            <span
              style="vertical-align: middle"
              :class="['iconfont', 'icon-love']"
            ></span>
            {{ likeContent }}
          </div>
          <div @click="connect" class="button all">立即沟通</div>
        </div>
      </div>
    </div>
    <div class="posts">
      <div style="font-weight: 900; font-size: 18px">职位描述</div>
      <div style="margin-top: 20px">
        <el-tag
          v-for="(item, index) in postsInfo.postsKey"
          :key="index"
          class="ml-2"
          type="info"
          size="large"
          style="margin-right: 10px"
          >{{ item }}</el-tag
        >
      </div>
      <div style="margin-top: 30px; font-size: 16px">
        <div v-html="postsInfo.description"></div>
      </div>
      <el-divider style="margin-top: -50px" />
      <div class="user">
        <div>
          <el-avatar :size="70" :src="userInfo.avatarImage" />
        </div>
        <div style="margin-left: 30px; margin-top: 5px">
          <div style="display: flex">
            <span style="font-size: 20px">{{ userInfo.username }}</span>
            <div style="background-color: #e5f8f8; margin-left: 10px">
              <el-icon style="color: #30cac9; font-size: 20px; margin-top: 5px"
                ><Select
              /></el-icon>
            </div>
            <span style="color: #ccc; margin-left: 15px; margin-top: 5px"
              >刚刚活跃</span
            >
          </div>
          <div style="font-size: 20px; margin-top: 5px">
            {{ userInfo.companyName }} · {{ userInfo.duties }}
          </div>
        </div>
      </div>
    </div>
    <div class="company">
      <div style="font-weight: 900; font-size: 18px">公司介绍</div>
      <div
        style="font-size: 16px; margin-top: 20px; line-height: 30px"
        v-html="companyInfo.description"
      ></div>
      <div style="font-weight: 900; font-size: 18px; margin-top: 20px">
        工作地址
      </div>
      <div style="margin-top: 10px">
        {{ postsInfo.location }}
      </div>
      <div id="container"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.posts-box {
  background-color: #ebf4f7;
  padding-bottom: 30px;
  .top {
    width: 100%;
    height: 220px;
    background-color: #37566c;
    color: white;
    .button {
      width: 160px;
      height: 45px;
      border: 2px solid #00bebd;
      border-radius: 10px;
      font-size: 22px;
      color: #00bebd;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      transition: background-color 0.5s ease; /* 过渡效果，持续0.5秒 */
    }
    .all {
      background-color: #00bebd;
      color: white;
      margin-left: 30px;
    }
    .all:hover {
      background-color: #00d3d2;
    }
    .icon-love {
      font-size: 24px;
      color: #00bebd;
    }
    .none:hover {
      background-color: rgba($color: #00d3d2, $alpha: 0.1);
    }
    .like {
      color: white;
      background-color: #f26d49;
      border: 2px solid #f26d49;
      .iconfont {
        color: white;
      }
    }
    .like:hover {
      background-color: #f78160;
    }
  }
  .posts {
    width: 78%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 30px;
    margin-top: 15px;
    padding: 30px;
    height: 100%;
    .user {
      display: flex;
      margin-left: 30px;
    }
  }
  .company {
    width: 78%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 30px;
    margin-top: 15px;
    padding: 30px;
    height: 100%;
  }
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 400px;
    margin-top: 15px;
    border-radius: 15px;
    position: relative;
  }
}
</style>
